<template>
  <div class="login-panel">
    <div class="login-content">
      <!-- 顶部标题 -->
      <h1 class="title">账号密码登录</h1>
      <!-- 中间的表单 -->
      <div class="form">
        <el-form
          :model="account"
          :rules="accountRules"
          label-width="80px"
          size="large"
          status-icon
          ref="ruleFromRef"
        >
          <el-form-item label="邮箱" prop="userEmail" :error="emailErrorMsg">
            <el-input v-model="account.userEmail" />
          </el-form-item>
          <el-form-item label="密码" prop="password" :error="passwordErrorMsg">
            <el-input v-model="account.password" show-password />
          </el-form-item>
        </el-form>
      </div>
      <!-- 底部区域 -->
      <div class="controls">
        <el-checkbox label="记住密码" size="large" v-model="rememberMe" />
        <el-link @click="forgetHandle" type="primary">忘记密码</el-link>
      </div>
      <el-button class="login-btn" type="primary" size="large" @click="handleLoginBtnClick"
        >立即登录</el-button
      >
    </div>
    <div :class="[ifForget != 0 ? 'forget-move' : 'forget']">
      <loginForget
        @forgetHandle="forgetHandle"
        :forget="prop.forget"
        @resetPassword="resetPassword"
      ></loginForget>
    </div>
  </div>
</template>

<script setup lang="ts">
import loginForget from './login-forget.vue'
import { reactive, ref, defineProps, defineEmits, toRefs, watch } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormRules, ElForm, FormInstance } from 'element-plus'
const prop = defineProps(['loginErrMsg', 'login', 'forget'])
const emit = defineEmits(['getLogoMsg', 'getForgetMsg', 'resetPassword'])
//1. 定义account数据
interface loginType {
  userEmail: string
  password: string
}
//登录信息
const account = reactive<loginType>({
  userEmail: '',
  password: ''
})

//监听prop中数据的改变
watch(prop.login, (newValue, oldValue) => {
  account.userEmail = newValue.userEmail
  account.password = newValue.password
})

//表单实例
const ruleFromRef = ref<FormInstance>()
//错误信息展示数据
const { emailErrorMsg, passwordErrorMsg } = toRefs(prop.loginErrMsg)
//记住我
const rememberMe = ref<Boolean>(true)
//2. 定义校验规则
const accountRules: FormRules = {
  userEmail: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    {
      pattern: /^([a-zA-Z]|[0-9])(\w|\\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
      message: '请正确输入邮箱',
      trigger: 'change'
    },
    {
      pattern: /^([a-zA-Z]|[0-9])(\w|\\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
      message: '请正确输入邮箱',
      trigger: 'blur'
    }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      pattern: /^(?![a-zA-Z]+$)(?!\d+$)(?![^\da-zA-Z\s]+$).{9,}$/,
      message: '密码至少由9位以上字母、数字、特殊字符组成',
      trigger: 'change'
    },
    {
      pattern: /^(?![a-zA-Z]+$)(?!\d+$)(?![^\da-zA-Z\s]+$).{9,}$/,
      message: '密码至少由9位以上字母、数字、特殊字符组成',
      trigger: 'blur'
    }
  ]
}

//登录按钮的点击
const handleLoginBtnClick = () => {
  if (!ruleFromRef.value) return
  ruleFromRef.value.validate((valib: any) => {
    //校验成功(仅输入符合规则，是否正确还需校验,即未发送网络请求)
    if (valib) {
      //告诉父组件发送网络请求
      emit('getLogoMsg', account, rememberMe.value)
    } else {
      //校验失败
      ElMessage.error('登录失败，请正确填写信息！！')
      return
    }
  })
}
const resetPassword = (value: any) => {
  emit('resetPassword', value)
}

//4、忘记密码切换
const ifForget = ref(0)
const forgetHandle = () => {
  ifForget.value = ~ifForget.value
}
</script>

<style lang="less" scoped>
.login-panel {
  margin-top: -90px;
  position: relative;
  width: 340px;
  border: 1px solid #fff;
  border-radius: 9px;
  background-color: #fff;
  box-shadow: 0 0 90px rgba(255, 255, 255, 0.5) inset;
  padding: 40px 50px 40px 10px;
  height: 360px;
  overflow: hidden;
  .login-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 40px;
    .title {
      text-align: center;
      padding-left: 50px;
      margin-bottom: 25px;
    }
    .controls {
      display: flex;
      margin-left: 20px;
      justify-content: space-between;
    }
    .login-btn {
      margin-top: 25px;
      margin-left: 55px;
      width: 80%;
    }
  }
}
.forget {
  position: absolute;
  top: 0;
  transform: translateX(390px);
  transition: all 1s;
}
.forget-move {
  position: absolute;
  top: 0;
  transform: translateX(0px);
  transition: all 1s;
}
/deep/.el-checkbox.el-checkbox--large .el-checkbox__inner {
  z-index: 0;
}
</style>
